<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>入住登记</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<link rel="stylesheet" type="text/css"
	href="<%=path%>/lib/bootstrap/css/bootstrap.css">
<script src="<%=path%>/lib/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript"
	src="<%=path%>/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="<%=path%>/js/xcConfirm2.js" type="text/javascript"
	charset="utf-8"></script>
</head>

<body>
	<div class="modal fade" id="ruzhu" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel" name="roomrType" align="center"></h4>
				</div>
				<!-- 表单区域 start -->
				<form class="form-inline" action="checkIn.action" method="post" style="margin: 0">
				<div class="modal-body">
				
					<table class="table" id="roomtable">
					<tr>
							
							<td>
								<div class="form-group">
									<label class="sr-only" for="exampleInputEmail6">金额：￥</label>
									<label id="roomPrice"></label>
								</div>
							</td>
							<td>
								<div class="form-group">
									<label class="sr-only" for="exampleInputEmail7">押金：￥</label>
									<label id="roomforegift"></label>
								</div>
							</td>
						</tr>
						<tr>
						
						<td>
							<div class="form-group" style="width: 93;">
								<label class="sr-only" for="exampleInputEmail9" >人数</label>
								<select id="roommost" name="renshu">
									<option value="1">1</option>
								</select>
							</div>
						</td>
							<td>
								<div class="form-group">
									<label class="sr-only" for="exampleInputEmail5">入住天数</label><br/>
									<input name="days" type="text" class="form-control" id="exampleInputEmail5" placeholder="入住天数" style="width: 220px;height:29px" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"  
    onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}" >
								</div>
							</td>
					</tr>
					<tr>
						<td colspan="2">
							<div class="form-group" style="width: 93%;">
								<label class="sr-only" for="exampleInputEmail9">备注</label><br/>
								<textarea name="remark" class="form-control" rows="2" style="width: 102%" placeholder="备注信息" ></textarea>
							</div>
						</td>
					</tr>
					<tr id="customers">
							<td>
								<div class="form-group" >
									<label class="sr-only" for="exampleInputEmail3">客户 ：</label><br/>
									<input type="text" name="customer" class="form-control" id="exampleInputEmail2" placeholder="身份证号码" style="width: 220px;height:29px;">
								</div>
							</td>
					</tr>
					</table>
				</div>
				<div class="modal-footer">
					<input name="account" type="hidden"/>
					<input name="rNo" type="hidden"/>
					<input name="cId" type="hidden"/>
					<input name="uId" type="hidden" value="1"/>
					<label style="padding-left: 3%;font-weight: bolder;">总价：￥<span id="account"/></label>
					<button type="submit" class="btn btn-success" >提交</button>
				</div>
				</form>
				<!-- 表单区域 end -->
			</div>
		</div>
	</div>
	<h2 style="padding: 3% 5%;">入住登记</h2>
	<div class="container">
		<select class="form-control" name="statu">
		<option value="0">全部</option>
			<c:forEach items="${roomStateList }" var="rs">
				<c:if test="${rs.roomStateId==stateId }">
					<option value="${rs.roomStateId }" selected="selected">${rs.state }</option>
				</c:if>
				<c:if test="${rs.roomStateId!=stateId }">
					<option value="${rs.roomStateId }">${rs.state }</option>
				</c:if>
				
			</c:forEach>
		</select>
		<div style="float: right;">
			<input type="text" class="search-query" name="" placeholder="输入房间类型 / 房间名称" style="height: 3%;"/>
			<input type="button" class="btn btn-primary" name="" value="查询"/>
		</div>

	<table class="table table-hover" id="roomtable">
		<tr>
			<th>房号</th>
			<th>房间类型</th>
			<th>状态</th>
			<th>位置</th>
			<th>操作</th>
		</tr>
		<c:forEach items="${room }" var="r">
			<tr class="roomtr">
				<td>${r.roomInfoId }</td>
				<td>${r.roomType.rType }</td>
				<td>${r.roomState.state }</td>
				<td>三楼</td>
				<td>
					<c:if test="${r.roomState.state=='空闲' || r.roomState.state=='未清理'}">
						<c:if test="${r.roomState.state=='空闲'}">
							<button type="button" class="btn  btn-success checkIn" data-toggle="modal" data-target="#ruzhu"  onclick="roomId=${r.roomInfoId};rNo=${r.roomInfoId}">入住</button>
						</c:if>
						<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#ruzhu"  onclick="roomId=${r.roomInfoId};rNo=${r.roomInfoId}"data-toggle="modal" data-target="#ruzhu"  onclick="roomId=${r.roomInfoId};rNo=${r.roomInfoId}">预定</button>
					</c:if>
			</tr>
		</c:forEach>

	</table>

	<ul class="pager">
		<li class="previous ${pageNo==1?'disabled':''}"><c:if
				test="${pageNo==1}">
				<a>上一页</a>
			</c:if> <c:if test="${pageNo!=1}">
				<a href="roomlist.action?pageNo=${pageNo-1 }&stateId=${stateId}">上一页</a>
			</c:if></li>

		<li style="text-align: center;">${pageNo}</li>
		<li class="next ${room.size()!=0&&room.size()%pageSize!=0?'disabled':''}">
			<c:if test="${room.size()!=0&&room.size()%pageSize!=0}">
				<a>下一页</a>
			</c:if> <c:if test="${room.size()!=0 && room.size()%pageSize==0}">
				<a href="roomlist.action?pageNo=${pageNo+1 }&stateId=${stateId}">下一页</a>
			</c:if></li>
	</ul>
</div>
	<script type="text/javascript">
		var stateId = null;	//房间状态ID，主要用于房间状态的查询
		var rNo = null;	//房间号
		var cId = null;	//用户 
		var uId = null;	//房间号
		
		$(function() {
			$(".roomState").click(function() {
				/* alert(stateId); */
				window.location.href = "roomlist.action?stateId=" + stateId;
			});
			//按条件查询房间
			$("select[name=statu]").change(function(){
				var stateId = $(this).val();
				window.location.href="roomlist.action?stateId="+stateId;
			});
			//入住
			$(".checkIn").click(function(){
				$.ajax({
					type:"post",
					url:"findByRoomId.action",
					data:{"roomId":roomId},
					success:function(room){
						$("#roommost").html("");
						$("#myModalLabel").html(room.roomType.rType);	//房间类型
						$("#roomPrice").html(room.roomType.price);		//房间价格
						$("#roomforegift").html(room.roomType.foregift);//房间押金
						$("input[name=rNo]").val(rNo);
						for(var i=1;i<=room.roomType.most;i++){
							var opt = "<option value='"+i+"'>"+i+"</option>";
						
							$("#roommost").append(opt);
						}
						$("#account").html(room.roomType.price+room.roomType.foregift);
					}
				});
			});
			//人数
			$("#roommost").change(function(){
				//这段代码实现了多客户入住，因时间原因暂未实现
				/* $("#customers").html("");
					var roomMost = $(this).val();
					for(var i=1;i<=roomMost;i++){
						var lab = "<div class='form-group' style='padding-left: 3%;padding-bottom: 10px'><label class='sr-only' for='exampleInputEmail3'>客户 "+i+"：</label><br/>";
						var inp = "<input type='text' class='form-control' id='exampleInputEmail2' placeholder='身份证号码' style='width: 220px;height:29px;'></div>";
							$("#customers").append(lab+inp);
						} */
			});
			//天数
			$("input[name=days]").blur(function(){
				var day = $(this).val();
				if(day==""){
					alert("请输入天数");
				}
				$("input[name=account]").val(($("#roomPrice").html()*day)*1+($("#roomforegift").html())*1);
				$("#account").html(($("#roomPrice").html()*day)*1+($("#roomforegift").html())*1);
				
			});
			//客户
			$("input[name=customer]").blur(function(){
				var zjNo = $(this).val();
				if(zjNo==""){
					return false;
				}
				$.ajax({
					type:"post",
					url:"findCustomerByzjNo.action",
					data:{"zjNo":zjNo},
					async:false,
					success:function(customer){
						if(customer==""){
							alert("客户不存在");
							return;
						}else{
							$("input[name=cId]").val(customer.customerId);
						}
					}
				})
			});
		});
	</script>
	<script src="js/canvas-nest.min.js" count="200" zindex="-2" opacity="0.5" color="47,135,193" type="text/javascript"></script>
</body>
</html>
